<template>
  <el-row>
    <el-card v-loading="currentLoading">
      <el-collapse accordion value="1">
        <el-collapse-item name="1">
          <template slot="title">
            {{ $t('reportModule.financialdata.today') }}
          </template>
          <el-row :gutter="10">
            <el-col :span="12">
              <table>
                <tr v-for="(item, index) in $t('reportModule.financialdata.table1')" :key="index">
                  <td>{{ item['name'] }}</td>
                  <td>
                    <span v-if="item['reflect'] === 'loanOrderWaitNum'">{{ financeCurrent && financeCurrent[item["reflect"]] ? financeCurrent[item["reflect"]] : 0 }}</span>
                    <span v-if="item['reflect'] && item['reflect'] !== 'loanOrderWaitNum'">{{ financeCurrent && financeCurrent[item["reflect"]] ? (financeCurrent[item["reflect"]]).toFixed(2) : 0 }}</span>
                  </td>
                </tr>
              </table>
            </el-col>
            <el-col :span="12">
              <table>
                <tr v-for="(item, index) in $t('reportModule.financialdata.table2')" :key="index">
                  <td>{{ item['name'] }}</td>
                  <td v-if="item['reflect'] === 'loanOrderSuccessNum'">{{ financeCurrent && financeCurrent[item["reflect"]] ? financeCurrent[item["reflect"]] : 0 }}</td>
                  <td v-if="item['reflect'] !== 'loanOrderSuccessNum'">{{ financeCurrent && financeCurrent[item["reflect"]] ? (financeCurrent[item["reflect"]]).toFixed(2) : 0 }}</td>
                </tr>
              </table>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-card>
      <el-collapse accordion value="1">
        <el-collapse-item name="1">
          <template slot="title">
            {{ $t('reportModule.financialdata.history') }}
          </template>
          <el-form ref="searchForm" :inline="true" class="demo-form-inline">
            <el-form-item :label="$t('reportModule.financialdata.tableData.month')">
              <el-date-picker
                v-model="time"
                type="monthrange"
                range-separator="~"
                :start-placeholder="$t('common.startDate')"
                :end-placeholder="$t('common.endDate')"
              />
            </el-form-item>
            <el-row>
              <el-button type="primary" @click="search">
                {{ $t('common.search') }}
              </el-button>
              <el-button @click="reset">
                {{ $t('common.reset') }}
              </el-button>
            </el-row>
          </el-form>
          <el-table
            v-loading="loading"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            :data="tableData"
            border
            :stripe="true"
            style="width: 100%;margin-top: 10px"
          >
            <el-table-column
              fixed="left"
              prop="date"
              :label="tableText['month']"
              min-width="120"
            />
            <el-table-column
              fixed="left"
              prop="applyAmount"
              :label="tableText['applyAmount']"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['applyAmount'] ? (scope.row['applyAmount']).toFixed(2) : 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="applyNum"
              :label="tableText['applyNum']"
              min-width="120"
            >
              <template slot-scope="scope">
                {{ scope.row['applyNum'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="loanAmount"
              :label="tableText['loanAmount']"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['loanAmount'] ? (scope.row['loanAmount']).toFixed(2) : 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="loanNum"
              :label="tableText['loanNum']"
              min-width="120"
            >
              <template slot-scope="scope">
                {{ scope.row['loanNum'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="oughtRepayAmount"
              :label="tableText['oughtRepayAmount']"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['oughtRepayAmount'] ? (scope.row['oughtRepayAmount']).toFixed(2) : 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="realOughtRepayAmount"
              :label="tableText['realOughtRepayAmount']"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['realOughtRepayAmount'] ? (scope.row['realOughtRepayAmount']).toFixed(2) : 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="doneNum"
              :label="tableText['doneNum']"
              min-width="120"
            >
              <template slot-scope="scope">
                {{ scope.row['doneNum'] || 0 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="repayAmount"
              :label="tableText['repayAmount']"
              min-width="150"
            >
              <template slot-scope="scope">
                {{ scope.row['repayAmount'] ? (scope.row['repayAmount']).toFixed(2) : 0 }}
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </el-row>
</template>

<script>
import { getFinanceCurrent, getFinanceHistory } from '@/api/finance'
import { formatDate } from '@/utils/method'
export default {
  name: 'FinancialData',
  data() {
    return {
      currentLoading: true,
      financeCurrent: {},
      loading: false,
      tableData: [],
      tableText: {},
      time: [new Date(), new Date()]
    }
  },
  mounted() {
    this.tableText = this.$t('reportModule.financialdata.tableData')
    this.getFinanceCurrentData()
    this.getData()
  },
  methods: {
    getFinanceCurrentData() {
      getFinanceCurrent()
        .then(res => {
          this.currentLoading = false
          if (res.success) {
            this.financeCurrent = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.currentLoading = false
          this.$message.error(err.message)
        })
    },
    search() {
      this.getData()
    },
    reset() {
      this.time = [new Date(), new Date()]
      this.getData()
    },
    getData() {
      const data = {}
      if (this.time && this.time.length > 1) {
        data['start'] = formatDate(new Date(this.time[0]), 'yyyy-MM') + '-01 00:00:00'
        data['end'] = formatDate(new Date(this.time[1]), 'yyyy-MM') + '-' + new Date(this.time[1].getFullYear(), this.time[1].getMonth() + 1, 0).getDate() + ' 23:59:59'
      }
      getFinanceHistory(data)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.tableData = res.data
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card{
  margin: 10px;
}
table{
  width: 100%;
  border-collapse: collapse;
  tr{
    width: 100%;
    text-align: center;
    td{
      height: 50px;
      min-width: 30%;
      border: 1px #cccccc solid;
    }
  }
}
</style>
